import Vue from 'vue';
import store from '../store/index';
import * as filters from '../api/filters'; //filter公共函数库
import '../api/util.js'

// /* 测试组件 */
import kmTest from "../test/test-page.vue"; //发现首页
import kmApiTest from "../test/api-page.vue"; //发现首页
import kmStylesTest from "../test/style-page.vue"; //发现首页

/* loading commpents */
/* 发现 */
import discoverHomePage from "../views/discovery-home-page.vue"; //发现首页
import searchResultsPage from "../views/search-results-page.vue"; //搜索页
import forumListPage from "../views/forum-list-page.vue"; //技术专栏列表
import conceptPage from "../views/concept-page.vue"; //相关概念
import conceptContentPage from "../views/concept-content-page.vue"; //相关内容概念
import editConceptPage from "../views/edit-concept-page.vue"; //编辑相关概念
import conceptPickerPage from "../views/concept-picker-page.vue"; //相关概念选择
import columnListPage from "../views/column-list-page.vue"; //栏目列表
import columnPage from "../views/column-page.vue"; //栏目详情
import articlePage from "../views/article-page.vue"; //文章内容
import commentsListPage from "../views/comments-list-page.vue"; //文章评论列表
import editCommentsPage from "../views/edit-comments-page.vue"; //文章评论列表
import replyListPage from "../views/reply-list-page.vue"; //回复列表

/* 我 */
import myProfileHomePage from "../views/my-profile-home-page.vue"; //我
import myInfoPage from "../views/my-info-page.vue"; //我的资料
import editUserNicknamePage from "../views/edit-user-nickname-page.vue"; //编辑昵称页面
import editUserHeadPage from "../views/edit-user-head-page.vue"; //编辑头像
import myFoucePage from "../views/my-fouce-page.vue"; //我关注的页面
import userProfilePage from "../views/user-profile-page.vue"; //作者信息
import userActionsPage from "../views/user-actions-page.vue"; //作者动态
import userArticlePage from "../views/user-article-page.vue"; //作者文章
import myFavoritesListPage from "../views/my-favorites-list-page.vue"; //我的收藏
import myFavoritesFolderPage from "../views/my-favorites-folder-page.vue"; //我的文件夹
import editFavoritesPage from "../views/edit-favorites-page.vue"; //编辑收藏夹
import recentBrowsePage from "../views/recent-browse-page.vue"; //最近浏览页面
import myDraftPage from "../views/my-draft-page.vue"; //我的草稿列表页面

/* 消息 */
import messageHomePage from "../views/message-home-page.vue"; //消息中心
import messageTimeLinePage from "../views/message-timeline-page.vue"; //消息详情

/* 登录 */
import loadingPage from "../views/loading-page.vue"; //加载页面
import activationPage from "../views/activation-page.vue"; //登录&激活页面
import loginPage from "../views/login-page.vue"; //登录页面
import reLoginPage from "../views/re-login-page.vue"; //切换账号
import customInterestPage from "../views/custom-interest-page.vue"; //感兴趣的用户
import signupEnterPhonePage from "../views/signup-enter-phone-page.vue"; //手机注册用户
import signupEnterCodePage from "../views/signup-enter-code-page.vue"; //输入验证码登录
import signupEnterPasswordPage from "../views/signup-enter-password-page.vue"; //注册设置密码登录页面

/* 兴趣 */
import interestingHomePage from "../views/interesting-home-page.vue"; //感兴趣的页面

/* 其他 */
import toolbar from "../components/toolbar.vue"; //toolbar
import searchbar from "../components/searchbar.vue"; //搜索栏
import speeddial from "../components/speed-dial-button-group.vue"; //浮动按钮组

// /* 公共组件 */
// import  components from '../components/' //加载公共组件

//other commpents
// import forumPage from "../views/forum-view.vue"; //技术专栏详情
// import articlePage from "../views/article-view.vue"; //文章详情

/* loading commpents */
// import discoverHomePage from "../views/discovery-home-view.vue"; //发现首页
// import searchResultsPage from "../views/search-results-view.vue"; //搜索页
// import forumListPage from "../views/forum-list-view.vue"; //技术专栏列表
// import forumPage from "../views/forum-view.vue"; //技术专栏详情
// import articlePage from "../views/article-view.vue"; //文章详情


//canvas loading page
//import "../api/shape-shifter"

//import { changeCurrentPosition } from '../store/actions/discovery';
//import { mapActions } from 'vuex'


//import { changeCurrentPosition } from '../store/actions/discovery';
//import { mapActions } from 'vuex'

// Object.keys(components).forEach((key) => {
//     var name = key.replace(/(\w)/, (v) => v.toUpperCase()) //首字母大写
//     Vue.component(`v${name}`, components[key])
// })

Object.keys(filters).forEach(k => Vue.filter(k, filters[k])) //注册过滤器


Vue.config.devtools = true;
Vue.config.silent = false;

/*
    监听页面切换事件, 设置store当前页面
 */
$$(document).on('pageBeforeAnimation', function(e) {
    const page = e.detail.page;

    //设置store
    store.dispatch('changeCurrentPosition', { pageName: page.name });
})



/*
    监听页面初始化事件, 挂载页组件
 */
$$(document).on('pageBeforeInit', function(e) {

    const page = e.detail.page;
    console.log(page.name)
        //发现
    if (page.name === 'discovery-home-page') {
        const pageRender = new Vue(discoverHomePage)
        pageRender.$mount('#discovery-home-page .page-content')

        //toolbar mount
        const toolBar = new Vue(toolbar)
        toolBar.$mount('#discovery-home-page .toolbar')
    }
    //我
    if (page.name === 'my-profile-home-page') {
        const pageRender = new Vue(myProfileHomePage)
        pageRender.$mount('#my-profile-home-page .page-content')

        //toolbar mount
        const toolBar = new Vue(toolbar)
        toolBar.$mount('#my-profile-home-page .toolbar')
    }
    //消息
    if (page.name === 'message-home-page') {
        const pageRender = new Vue(messageHomePage)
        pageRender.$mount('#message-home-page .page-content')

        //toolbar mount
        const toolBar = new Vue(toolbar)
        toolBar.$mount('#message-home-page .toolbar')
    }
    //兴趣
    if (page.name === 'interesting-home-page') {
        const pageRender = new Vue(interestingHomePage)
        pageRender.$mount('#interesting-home-page .page-content')

        //toolbar mount
        const toolBar = new Vue(toolbar)
        toolBar.$mount('#interesting-home-page .toolbar')
    }

    //技术专栏列表
    if (page.name === 'forum-list-page') {
        const pageRender = new Vue(forumListPage)
        pageRender.$mount('#forum-list-page .page-content')
    }

    //概念
    if (page.name === 'concept-page') {
        const pageRender = new Vue(conceptPage)
        pageRender.$mount('#concept-page .page-content')
    }

    //概念内容
    if (page.name === 'concept-content-page') {
        const pageRender = new Vue(conceptContentPage)
        pageRender.$mount('#concept-content-page .page-content')
    }

    //编辑概念
    if (page.name === 'edit-concept-page') {
        const pageRender = new Vue(editConceptPage)
        pageRender.$mount('#edit-concept-page .page-content')
    }

    //概念弹出
    if (page.name === 'concept-picker-page') {
        const pageRender = new Vue(conceptPickerPage)
        pageRender.$mount('#concept-picker-page .page-content')
    }

    //技术专栏
    if (page.name === 'column-list-page') {
        const pageRender = new Vue(columnListPage)
        pageRender.$mount('#column-list-page .page-content')
    }

    //专栏详情
    if (page.name === 'column-page') {
        const pageRender = new Vue(columnPage)
        pageRender.$mount('#column-page .page-content')
    }


    //文章详情
    if (page.name === 'article-page') {
        const pageRender = new Vue(articlePage)
        pageRender.$mount('#article-page .page-content')

        $$('#article-page').prepend('<div class="speed-dial"></div>')
        const speedDial = new Vue(speeddial)
        speedDial.$mount('#article-page .speed-dial')
    }


    //搜索页
    if (page.name === 'search-results-page') {
        //dom container
        $$('#search-results-page').prepend('<form class="searchbar"></form>')

        //searchbar mount
        const searchBar = new Vue(searchbar)
        searchBar.$mount('#search-results-page .searchbar')

        //toolbar mount
        const toolBar = new Vue(toolbar)
        toolBar.$mount('#search-results-page .toolbar')

        //page-content mount
        const pageRender = new Vue(searchResultsPage)
        pageRender.$mount('#search-results-page .page-content')
    }


    //兴趣页
    if (page.name === 'interesting-home-page') {

        //toolbar mount
        const toolBar = new Vue(toolbar)
        toolBar.$mount('#interesting-home-page .toolbar')

        //page-content mount
        const pageRender = new Vue(interestingHomePage)
        pageRender.$mount('#interesting-home-page .page-content')
    }


    //消息页
    if (page.name === 'message-home-page') {

        //toolbar mount
        const toolBar = new Vue(toolbar)
        toolBar.$mount('#message-home-page .toolbar')

        //page-content mount
        const pageRender = new Vue(messageHomePage)
        pageRender.$mount('#message-home-page .page-content')
    }


    //我的主页
    if (page.name === 'my-profile-home-page') {

        //toolbar mount
        const toolBar = new Vue(toolbar)
        toolBar.$mount('#my-profile-home-page .toolbar')

        //page-content mount
        const pageRender = new Vue(myProfileHomePage)
        pageRender.$mount('#my-profile-home-page .page-content')
    }

    //我的主页
    if (page.name === 'km-test-page') {
        //page-content mount
        const pageRender = new Vue(kmTest)
        pageRender.$mount('#km-test-page .page-content')
    }

    if (page.name === 'km-api-page') {
        //page-content mount
        const pageRender = new Vue(kmApiTest)
        pageRender.$mount('#km-api-page .page-content')
    }

    if (page.name === 'km-styles-page') {
        //page-content mount
        const pageRender = new Vue(kmStylesTest)
        pageRender.$mount('#km-styles-page .page-content')
    }


})


/*
    控制穿透布局navbar
 */
$$(document).on('navbarBeforeInit', function(e) {
    var navbar = e.detail.navbar;
    var page = e.detail.page;

    //设置navbar
    if (page.name === 'discovery-home-page') {
        myApp.addNavbar(navbar.innerContainer, {
            title: '发现',
            left: {
                text: false,
                button: false
            }
        })
    }

    if (page.name === 'search-results-page') {
        myApp.addNavbar(navbar.innerContainer, {
            title: '搜索',
            left: {
                text: false,
                button: false
            }
        })
    }

    if (page.name === 'column-list-page') {
        myApp.addNavbar(navbar.innerContainer, {
            title: '技术专栏',
            right: {
                button: 'icon-add'
            }
        })
    }

    if (page.name === 'column-page') {
        myApp.addNavbar(navbar.innerContainer, {
            title: '专栏详情',
            right: {
                button: 'icon-add'
            }
        })
    }

    if (page.name === 'article-page') {
        myApp.addNavbar(navbar.innerContainer, {
            title: '文章详情',
            right: {
                button: 'icon-more'
            }
        })
    }


    //兴趣
    if (page.name === 'interesting-home-page') {
        myApp.addNavbar(navbar.innerContainer, {
            title: '兴趣',
            left: {
                text: false,
                button: false
            }
        })
    }


    //消息
    if (page.name === 'message-home-page') {
        myApp.addNavbar(navbar.innerContainer, {
            title: '消息',
            left: {
                text: false,
                button: false
            }
        })
    }


    //我
    if (page.name === 'my-profile-home-page') {
        myApp.addNavbar(navbar.innerContainer, {
            title: '我',
            left: {
                text: false,
                button: false
            }
        })
    }

    if (page.name === 'km-test-page') {
        myApp.addNavbar(navbar.innerContainer, {
            title: '测试',
            left: {
                text: false,
                button: false
            }
        })
    }

    if (page.name === 'km-api-page') {
        myApp.addNavbar(navbar.innerContainer, {
            title: '接口组件',
            right: {
                button: 'icon-more'
            }
        })
    }

    if (page.name === 'km-styles-page') {
        myApp.addNavbar(navbar.innerContainer, {
            title: '样式组件',
            right: {
                button: 'icon-more'
            }
        })
    }

    //修复navbar位置
    myApp.sizeNavbars('.view-main');

});


/*
    应用多入口
 */
const urlParam = $$.parseUrlQuery(window.location.href)
if (urlParam.pageName && urlParam.pageName != '') {
    myApp.redictNewPage(urlParam.pageName, false, false, false, false)
} else {
    //默认入口
    myApp.redictNewPage('km-test-page', true, false, false, false)
}


//loading canvas page - pop up
//const popupHTML = '<div class="popup popup-loading">'+
//    '<div class="content-block">'+
//    '<canvas class="canvas"></canvas>'+
//    '</div>'+
//    '</div>';
//
//$$('.popup-loading').on('popup:opened', function(){
//    console.log('loading canvas Popup opened');
//});
//
//$$('.popup-loading').on('popup:closed', function(){
//    console.log('loading canvas Popup is closed');
//});


//myApp.popup('.popup-loading');